// 数据大屏

<template>
  <view>
    <!-- 进度条 -->
    <view class="arcbar">
      <view class="swap">
        <text>{{ type ? '今日加工单' : '今日委外加工单' }}</text>
        <image
          src="@/static/images/swap.png"
          mode="widthFix"
          @click=";(type = !type), getArcbarData()"
        />
      </view>
      <scroll-view class="arcbar-scroll" scroll-x enable-flex>
        <view class="arcbar-big">
          <text class="title">总数量（个）</text>
          <text class="number">{{ order.need_number }}</text>
          <view class="chart">
            <qiun-data-charts
              type="arcbar"
              canvas2d
              :opts="optsAll"
              :chartData="chartDataAll"
            />
          </view>
        </view>
        <view class="arcbar-big">
          <text class="title">完成数量（个）</text>
          <text class="number">{{ order.number }}</text>
          <view class="chart">
            <qiun-data-charts
              type="arcbar"
              canvas2d
              :opts="optsDone"
              :chartData="chartDataDone"
            />
          </view>
        </view>
        <view class="arcbar-small">
          <view class="arcbar-small-item">
            <text class="title">人工数量（个）</text>
            <text class="number">{{ order.works }}</text>
          </view>
          <view class="arcbar-small-item">
            <text class="title">人工用时（h）</text>
            <text class="number">{{ order.work_hours }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 实时订单数据 -->
    <view class="data">
      <text class="title">实时订单数据</text>
      <view class="table">
        <text class="tip">右滑查看更多数据</text>
        <uni-table border emptyText="暂无数据">
          <!-- 表头行 -->
          <uni-tr>
            <uni-th align="center">工单号</uni-th>
            <uni-th align="center">计划产量</uni-th>
            <uni-th align="center">实际产量</uni-th>
            <uni-th align="center">完成率</uni-th>
            <uni-th align="center">不良率</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item, index) in dataInfo.list" :key="index">
            <uni-td align="center">{{ item.purchase_code }}</uni-td>
            <uni-td align="center">{{ item.need_number }}</uni-td>
            <uni-td align="center">{{ item.number }}</uni-td>
            <uni-td align="center">
              <text style="color: #29e33b">{{ item.number_pr }}%</text>
            </uni-td>
            <uni-td align="center">
              <text style="color: #fb6c6c">{{ item.bad_number_pr }}%</text>
            </uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>
    <!-- 七日数据对比 -->
    <view class="data">
      <text class="title">七日数据对比</text>
      <view class="line">
        <qiun-data-charts
          type="line"
          canvas2d
          :opts="optsLine"
          :chartData="chartDataLine"
        />
      </view>
    </view>
    <!-- 商品生产排行 -->
    <view class="data">
      <text class="title">商品生产排行</text>
      <view class="table">
        <text class="tip">右滑查看更多数据</text>
        <uni-table border emptyText="暂无数据">
          <!-- 表头行 -->
          <uni-tr>
            <uni-th align="center">排行</uni-th>
            <uni-th align="center">商品名称</uni-th>
            <uni-th align="center">计划产量</uni-th>
            <uni-th align="center">实际产量</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item, index) in dataInfo.lists" :key="index">
            <uni-td align="center">
              <image v-if="index === 0" src="@/static/images/no1.png" />
              <image v-else-if="index === 1" src="@/static/images/no2.png" />
              <image v-else-if="index === 2" src="@/static/images/no3.png" />
              <text v-else>{{ index + 1 }}</text>
            </uni-td>
            <uni-td align="center">{{ item.goods_name }}</uni-td>
            <uni-td align="center">{{ item.need_number }}</uni-td>
            <uni-td align="center">{{ item.number }}</uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: true,
      order: {},
      dataInfo: {},
      chartDataAll: {
        series: [
          {
            name: '不良率',
            data: 0
          }
        ]
      },
      chartDataDone: {
        series: [
          {
            name: '完成率',
            data: 0
          }
        ]
      },
      chartDataLine: {
        categories: [],
        series: [
          {
            name: '生产总数',
            data: [],
            legendShape: 'circle'
          },
          {
            name: '合格数',
            data: [],
            legendShape: 'circle'
          },
          {
            name: '不合格数',
            data: [],
            legendShape: 'circle'
          }
        ]
      },
      optsAll: {
        color: ['#FB6C6C'],
        title: {
          name: '--',
          color: '#FB6C6C'
        },
        subtitle: {
          name: '不良率'
        }
      },
      optsDone: {
        color: ['#29E33B'],
        title: {
          name: '--',
          color: '#29E33B'
        },
        subtitle: {
          name: '完成率'
        },
        extra: {
          arcbar: {
            startAngle: 0.5
          }
        }
      },
      optsLine: {
        enableMarkLine: true,
        color: ['#1A96FF', '#29E33B', '#FB6C6C'],
        padding: [0, 12, 20, 12],
        dataLabel: false,
        legend: {
          position: 'top',
          itemGap: 26,
          padding: 20
        },
        xAxis: {
          fontColor: '#ccc',
          fontSize: 10
        },
        yAxis: {
          data: [
            {
              fontColor: '#ccc',
              fontSize: 10,
              axisLine: false
            }
          ]
        },
        extra: {
          line: {
            type: 'straight',
            width: 2
          }
        }
      }
    }
  },
  onShow() {
    // 如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态
    const curPages = getCurrentPages()[0] // 获取当前页面实例
    if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
      curPages.getTabBar().setData({
        selected: 1
      })
    }

    this.getData()
  },
  methods: {
    // 获取数据
    async getData() {
      const res = await this.$api.datainfo.datainfo()
      if (res.code == 200) {
        this.chartDataLine.categories = res.data.dataArr.xAxis
        this.chartDataLine.series[0].data = res.data.dataArr.series.all_number
        this.chartDataLine.series[1].data = res.data.dataArr.series.number
        this.chartDataLine.series[2].data = res.data.dataArr.series.bad_number

        this.dataInfo = res.data
        this.getArcbarData()
      }
    },
    // 获取进度条数据
    getArcbarData() {
      if (this.type) {
        this.order = this.dataInfo.countArr.jgd
      } else {
        this.order = this.dataInfo.countArr.wwjgd
      }
      const bad_number_pr = this.order.bad_number / this.order.need_number || 0
      const number_pr = this.order.number / this.order.need_number || 0
      this.chartDataAll.series[0].data = bad_number_pr
      this.chartDataDone.series[0].data = number_pr
      this.optsAll.title.name = bad_number_pr * 100 + '%'
      this.optsDone.title.name = number_pr * 100 + '%'
    }
  }
}
</script>

<style>
page {
  padding-bottom: 300rpx;
}
</style>
<style lang="less" scoped>
.arcbar {
  .swap {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    padding: 0 24rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    image {
      width: 32rpx;
      margin-left: 16rpx;
    }
  }

  .arcbar-scroll {
    display: flex;
    height: 416rpx;
    .title {
      font-weight: 500;
      color: #999999;
    }
    .number {
      font-size: 48rpx;
      font-weight: bold;
      color: #111111;
    }
    .arcbar-big {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 300rpx;
      height: 416rpx;
      margin-left: 24rpx;
      padding: 40rpx 28rpx 28rpx;
      background: #ffffff;
      border-radius: 16rpx;
      .chart {
        width: 220rpx;
        height: 220rpx;
      }
    }
    .arcbar-small {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 24rpx;
      padding-right: 24rpx;
      .arcbar-small-item {
        display: flex;
        flex-direction: column;
        width: 320rpx;
        height: 196rpx;
        padding: 0 28rpx;
        background: #ffffff;
        border-radius: 16rpx;
        .title {
          margin: 40rpx 0 24rpx;
        }
      }
    }
  }
}

.data {
  padding: 0 24rpx;
  .title {
    display: inline-block;
    margin: 48rpx 0 40rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }
  .table {
    padding: 32rpx 28rpx;
    background: #ffffff;
    border-radius: 16rpx;
    .tip {
      display: inline-block;
      margin-bottom: 32rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #cccccc;
    }
    image {
      width: 60rpx;
      height: 60rpx;
      margin: 0 auto;
    }
  }
  .line {
    height: 500rpx;
    background: #ffffff;
    border-radius: 16rpx;
  }
}

/deep/ .uni-table {
  .uni-table-tr {
    .uni-table-th {
      background-color: #f3f7fb;
      font-weight: 500;
      color: #666666;
      &:nth-child(1) {
        box-shadow: 4rpx 0 8rpx 0 rgba(0, 0, 0, 0.04);
      }
    }
    .uni-table-td {
      font-weight: 500;
      color: #111111;
      vertical-align: middle;
      &:nth-child(1) {
        box-shadow: 4rpx 0 8rpx 0 rgba(0, 0, 0, 0.04);
      }
    }
  }
}
</style>
